<template>
	<view>
		<uni-nav-bar :statusBar="true" dark title="球队管理" fixed left-icon="left" @clickLeft="clickLeft">
			<block slot="right">
				<view class="city">
					<view @click="onCreated">
						<uni-icons color="#fff" fontFamily="CustomFont" type="plusempty" :size="20"></uni-icons>
					</view>
				</view>
			</block>
		</uni-nav-bar>
		<view>

			<uni-collapse accordion @change="change">
				<uni-collapse-item thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
					:title="item.teamName" v-for="(item,index) in list">
					<block slot="title">
						<view class="contentList" @click="onShowData(item)">
							<image v-if="item.teamLogo" :src="imageUrl + item.teamLogo" mode=""></image>
							<image v-else src="@/static/user.jpg"></image>
							<view>
								<view>{{item.teamName}}</view>
								<view style="font-size: 24rpx;color: #A2A2A2">{{item.num || 0}}人</view>
							</view>
						</view>
					</block>
					<view class="contentBtn">
						<button @click="putInfo(item)">编辑信息</button>
						<view></view>
						<button @click="del(item)">移除球队</button>
					</view>
				</uni-collapse-item>
			</uni-collapse>

		</view>

		<!--  -->
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="popupbox">
				<view class="content">
					<uni-forms class="form" ref="baseForm" :modelValue="baseFormData" :rules="customRules">
						<uni-forms-item class="logo" labelWidth="180rpx" label="球队logo" required name="teamLogo">
							<uni-file-picker :value="selectimage" :autoUpload="false" limit="1" :del-icon="false"
								disable-preview :imageStyles="imageStyles" file-mediatype="image" @progress="progress"
								@select="select">选择</uni-file-picker>
						</uni-forms-item>
						<uni-forms-item labelWidth="180rpx" label="球队名称" required name="teamName">
							<uni-easyinput v-model="baseFormData.teamName" placeholder="请输球队名称" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="bottomBtn">
					<button @click="$refs.popup.close();" type="submit" class="submit">
						取消
					</button>
					<button @click="onPutSave" type="submit" class="submit">
						保存
					</button>
				</view>
			</view>
		</uni-popup>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import {
		getbasketballTeamList,
		putbasketballTeam,
		uploadAvatar,
		delbasketballTeam
	} from '@/api/basketballTeam/index.js'
	import {
		imageUrl
	} from '@/config.js'
	export default {
		data() {
			return {
				list: [],
				pageData: {
					pageSize: 10,
					pageNum: 1
				},
				total: 0,
				loadingType: 'more',
				imageUrl: imageUrl,
				selectimage: [],
				baseFormData: {
					teamLogo: '',
					teamName: ''
				},
				imageStyles: {
					width: '100rpx',
					height: '100rpx',
					border: {
						radius: '50%'
					}
				},
				customRules: {
					teamName: {
						rules: [{
							required: true,
							errorMessage: '请输球队名称'
						}]
					},
					teamLogo: {
						rules: [{
							required: true,
							errorMessage: '请选择球队logo'
						}]
					}
				}

			}
		},
		methods: {
			del(item) {
				uni.showModal({
					content: '确定移除吗？',
					success: (res) => {
						if (res.confirm) {
							delbasketballTeam(item.id).then(res => {
								this.list = []
								this.pageData = {
									pageSize: 10,
									pageNum: 1
								}
								this.getList();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			clickLeft() {
				uni.navigateBack()
			},
			onCreated() {
				uni.navigateTo({
					url: '/pages/basketballTeam/create'
				})
			},
			onPutSave() {
				putbasketballTeam(this.baseFormData).then(res => {
					this.$modal.msg(res.msg)
					this.pageData = {
						pageNum: 1,
						pageSize: 10,
					}
					this.list = []
					this.getList();
					this.$refs.popup.close();
				})
			},
			onShowData(item) {
				// alert(1)
				uni.navigateTo({
					url: '/pages/basketballTeam/info?id=' + item.id
				})
			},
			select(e) {
				console.log('选择文件：', e)
				uploadAvatar({
					file: e.tempFiles[0].file
				}).then(res => {
					console.log(res, '---')
					this.baseFormData.teamLogo = res.data;
				})
			},
			putInfo(item) {
				this.$refs.popup.open();
				this.selectimage[0] = {
					url: this.imageUrl + item.teamLogo
				};
				this.baseFormData.teamName = item.teamName
				this.baseFormData.teamLogo = item.teamLogo
				this.baseFormData.id = item.id
			},
			getList() {
				let id = uni.getStorageSync('contestId')
				getbasketballTeamList({
					leagueId: id,
					...this.pageData
				}).then(res => {
					this.total = res.total
					this.list.push(...res.rows)
					if (this.list.length == this.total) {
						this.loadingType = 'no-more'
						return;
					}
				})
			}
		},
		async onReachBottom() {
			if (this.list.length == this.total) {
				this.loadingType = 'no-more'
				return;
			}
			this.loadingType = 'loading'
			this.pageData.pageNum += 1
			this.getList()
		},
		onShow() {
			this.pageData = {
				pageNum: 1,
				pageSize: 10
			}
			this.list = []
			console.log(imageUrl);
			this.getList();
		}
	}
</script>

<style scoped lang="scss">
	.contentList {
		display: flex;
		padding: 30rpx;
		align-items: center;
		font-weight: 600;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
			margin-right: 20rpx;
		}
	}

	.contentBtn {
		display: flex;
		align-items: center;
		background-color: #F7F7F7;

		view {
			height: 20px;
			width: 1px;
			background-color: #E2E2E2;
		}

		button {
			width: calc(100% / 2);
			border: none;
			font-size: 28rpx;
			border-radius: 0;
			color: #7F7F7F;
			padding-top: 20rpx;
			padding-bottom: 20rpx;

			&::after {
				border: none;
			}
		}
	}

	.popupbox {
		background-color: #fff;
		min-height: 800rpx;

		.content {
			padding: 40rpx 20rpx;

			.logo {
				display: flex;
				align-items: center;
				padding-bottom: 40rpx;
			}
		}

		.bottomBtn {
			display: flex;
			justify-content: center;
			flex-direction: row;
			background-color: #fff;
			position: absolute;
			width: 100%;
			bottom: 0;
			padding: 40rpx 30rpx;
			padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
			border-top: 1px solid #eee;

			.submit-text {
				display: flex;

				font-size: 24rpx;
			}

			.submit {
				background-color: $btn-bg-color;
				color: #fff;
				width: 48%;
				font-size: 34rpx;
				font-weight: 800;
				margin-top: 20rpx;
			}
		}
	}
</style>